<template>
	<view class="page">
		<!-- 	<view class="item flex align-items ">
			<view class="item_lefts" style="width: 240rpx;">操作流程模板</view>
			<view class="item_right  flex align-items" @click="show = true">
				<u-input placeholder="请选择" v-model="name" :fontSize="16" :readonly="true"
					placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
				<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
			</view>
		</view> -->
		<view v-if="false" class="box " v-for="(v,i) in oldList" :key="v.id">
			<view class="item flex align-items ">
				<view class="item_left">操作项目</view>
			</view>
			<view class=" margin-top10 " style="border-bottom: 1rpx solid #E6E6E6;">
				<u-textarea v-model="v.name" placeholder="请输入" :readonly="true" :fontSize="16"
					placeholderClass="placeholderClass" style="font-size: 16px;"></u-textarea>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">类型</view>
				<view class="item_right flex align-items">
					<view class="item_is flex align-items">
						<image class="item_img" src="/static/img/index/yixuanzhong.png" mode="" v-if="v.category == 0">
						</image>
						<view class="item_yuan" v-else></view>
						<view>判断</view>
					</view>
					<view class="item_is  flex align-items margin-left30">
						<image class="item_img" src="/static/img/index/yixuanzhong.png" mode="" v-if="v.category ==1">
						</image>
						<view class="item_yuan" v-else></view>
						<view>填写</view>
					</view>
					<view class="item_is  flex align-items margin-left30">
						<image class="item_img" src="/static/img/index/yixuanzhong.png" mode="" v-if="v.category ==2">
						</image>
						<view class="item_yuan" v-else></view>
						<view>选择</view>
					</view>
				</view>
			</view>
			<view class="item flex align-items " style="height: auto;">
				<view class="item_left">操作项目</view>
				<view>
					<block v-for="(vi,index) in v.shopList" :key="index">
						<view class="item_right flex align-items  justify-content-between ">
							<u-input v-model="vi.value" :readonly="true" placeholder="请输入" class="inputs" :fontSize="16"
								placeholderClass="placeholderClass"
								style="width: 190px; border-radius: 0;margin-top: 10rpx;" :style="{
									borderBottom:index ==v.shopList.length-1?'none':'1rpx solid #E6E6E6'
								}"></u-input>

						</view>
					</block>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">顺序</view>
				<view class="item_right">
					<u-input v-model="v.sort" placeholder="请输入" :fontSize="16" :readonly="true"
						placeholderClass="placeholderClass"></u-input>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">拍照</view>
				<view class="item_right flex align-items">
					<view class="item_is flex align-items">
						<image class="item_img" v-if="v.ifPhotograph==1" src="/static/img/index/yixuanzhong.png"
							mode="">
						</image>
						<view class="item_yuan" v-else></view>
						<view>是</view>
					</view>
					<view class="item_is  flex align-items margin-left30">
						<image class="item_img" v-if="v.ifPhotograph==0" src="/static/img/index/yixuanzhong.png"
							mode="">
						</image>
						<view class="item_yuan" v-else></view>
						<view>否</view>
					</view>
				</view>
			</view>
			<!-- 		<view class="item flex align-items  justify-content-right" @click="dele(i)">
				<u-icon name="trash" color="#fe0000" :size="18"></u-icon>
			</view> -->
		</view>
		<view class="box " v-for="(v,i) in listProcess" :key="i">
			<view class="item flex align-items ">
				<view class="item_left">操作项目</view>
			</view>
			<view class=" margin-top10 " style="border-bottom: 1rpx solid #E6E6E6;">
				<u-textarea v-model="v.name" placeholder="请输入" :fontSize="16" placeholderClass="placeholderClass"
					style="font-size: 16px;"></u-textarea>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">类型</view>
				<view class="item_right flex align-items">
					<view class="item_is flex align-items" @click="v.category = 0">
						<image class="item_img" src="/static/img/index/xuanzhong.png" mode="" v-if="v.category == 0">
						</image>
						<view class="item_yuan" v-else></view>
						<view>判断</view>
					</view>
					<view class="item_is  flex align-items margin-left30" @click="v.category = 1">
						<image class="item_img" src="/static/img/index/xuanzhong.png" mode="" v-if="v.category ==1">
						</image>
						<view class="item_yuan" v-else></view>
						<view>填写</view>
					</view>
					<view class="item_is  flex align-items margin-left30" @click="v.category = 2">
						<image class="item_img" src="/static/img/index/xuanzhong.png" mode="" v-if="v.category ==2">
						</image>
						<view class="item_yuan" v-else></view>
						<view>选择</view>
					</view>
				</view>
			</view>
			<view class="item flex align-items " style="height: auto;" v-if="v.category ==2">
				<view class="item_left">操作项目</view>
				<view>
					<block v-for="(vi,index) in v.shopList" :key="index">
						<view class="item_right flex align-items  justify-content-between ">
							<u-input v-model="vi.value" placeholder="请输入" class="inputs" :fontSize="16"
								placeholderClass="placeholderClass"
								style="width: 190px; border-radius: 0;margin-top: 10rpx;" :style="{
									borderBottom:index ==v.shopList.length-1?'none':'1rpx solid #E6E6E6'
								}"></u-input>
							<view class="flex align-items " style="width: 90rpx;">
								<u-icon name="minus-circle" color="#2979ff" size="18" style="margin-left: 10rpx;"
									v-if="v.shopList.length>1" @click="showDel(i,index)"></u-icon>
								<u-icon name="plus-circle" color="#2979ff" size="18" style="margin-left: 10rpx;"
									v-if="index === v.shopList.length - 1" @click="showAdd(i)"></u-icon>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">操作</view>
				<view class="item_right flex justify-content-right">
				<!-- 	<u-input v-model="i" placeholder="请输入" :fontSize="16" type="number"
						placeholderClass="placeholderClass" :readonly="true"></u-input> -->
						<u-icon name="trash" color="#fe0000" :size="18" @click="dele(i)"></u-icon>
						<u-icon name="arrow-upward" color="#2979ff" :size="20" style="margin-left: 15rpx;" @click="moveUp(i)" v-if="i>0"></u-icon>
						<u-icon name="arrow-downward" color="#2979ff" :size="20" style="margin-left: 15rpx;" @click="moveDown(i)" v-if="i != listProcess.length -1"></u-icon>
				</view>
			</view>
		<!-- 	<view class="item flex align-items ">
				<view class="item_left">拍照</view>
				<view class="item_right flex align-items">
					<view class="item_is flex align-items" @click="v.ifPhotograph=1">
						<image class="item_img" v-if="v.ifPhotograph==1" src="/static/img/index/xuanzhong.png" mode="">
						</image>
						<view class="item_yuan" v-else></view>
						<view>是</view>
					</view>
					<view class="item_is  flex align-items margin-left30" @click="v.ifPhotograph=0">
						<image class="item_img" v-if="v.ifPhotograph==0" src="/static/img/index/xuanzhong.png" mode="">
						</image>
						<view class="item_yuan" v-else></view>
						<view>否</view>
					</view>
				</view>
			</view> -->
		<!-- 	<view class="item flex align-items  justify-content-right" >
		
			</view> -->
					<!-- <u-icon name="trash" color="#fe0000" :size="18" @click="dele(i)"></u-icon> -->
		</view>
		<view class="btn" @click="add()">+添加</view>
		<view class="eidt">
			<view class="box" style="margin-top: 35rpx;">
				<view class="item flex align-items ">
					<view class="item_left">修改原因</view>
				</view>
				<view class=" margin-top10 " style="padding-left: 5rpx;">
					<u-textarea v-model="reason" placeholder="请输入修改原因 " :fontSize="16"
						placeholderClass="placeholderClass" style="font-size: 16px;"></u-textarea>
				</view>
			</view>
		</view>
		<view class="bottom flex align-items">
			<!-- <view class="bottom_left" @click="generateAdd">生成模板</view> -->
			<view class="bottom_right" @click="processComit()">保存</view>
		</view>

		<!-- 弹出层 -->
		<u-popup :show="show" mode="center" :round="10">
			<view class="block">
				<view class="block_title">选择模板</view>
				<view class="block_herder flex align-items ">
					<view class="block_herder_left">模板名称</view>
					<u-input placeholder="请选择" :fontSize="14" placeholderClass="placeholderClass1"></u-input>
					<view class="block_herder_right">查询</view>
				</view>
				<view class="template">
					<view class="template_herder flex align-items ">
						<view class="template_left">选择</view>
						<view class="template_right">模板名称</view>
					</view>
					<view class="template_herder flex align-items " v-for="(v,i) in list" :key="i"
						@click="operationId =v.id">
						<view class="template_left">
							<image v-if="operationId ==v.id" class="template_img" src="/static/img/index/xuanzhong.png"
								mode=""></image>
							<view v-else class="template_yuan"></view>
						</view>
						<view class="template_right">{{v.name}}</view>
					</view>
				</view>
				<view class="block_btn flex align-items justify-content-between">
					<view class="block_btn_left" @click="comit(1)">取消</view>
					<view class="block_btn_right" @click="comit()">确认</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="completeShow" mode="center" :round="15" zIndex="9999999" @close="completeShow = false">
			<view class="blocks">
				<view class="blocks_herder">确认</view>
			</view>
			<view class="renmideTiao" style="width: 500rpx ; ">
				确认修改内容
			</view>
			<view class="blocks_btn flex align-items">
				<view class="blocks_btn_left" @click="completeShow = false">取消</view>
				<view class="blocks_btn_right" @click="completeShow =false">确认</view>
			</view>
		</u-popup>
		<!-- 生成模板 -->
		<u-popup :show="generateShow" mode="center" :round="10">
			<view class="blockGener" style="width: 650rpx;">
				<view class="blockGener_title">生成模板</view>
				<view class="blockGener_item flex align-items ">
					<view class="blockGener_item_left txt">模板名称:</view>
					<view class="blockGener_item_right">
						<u-input v-model="generateForm.name" placeholder="请输入" :fontSize="16"
							placeholderClass="placeholderClass"></u-input>
					</view>
				</view>
				<view class="blockGener_item flex align-items ">
					<view class="blockGener_item_left">适用设备类型:</view>
					<view class="blockGener_item_right" @click="treeClick()">
						<u-input v-model="generateForm.label" placeholder="请输入" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="block_btn flex align-items justify-content-between">
					<view class="block_btn_left" @click="generateShow =false">取消</view>
					<view class="block_btn_right" @click="generateComit()">确认</view>
				</view>
			</view>
		</u-popup>
		<tree ref="tree" @comit="treeComit" :treeData="treeData"></tree>
	</view>
</template>

<script>
	import urlConfig from "@/request/urlConfig.js";
	import {
		getInfo,
		handoverUpdateApply
	} from '@/api/risks.js'
	import {
		operationList,
		operationAdd
	} from '@/api/operation.js'

	import {
		deviceInfoList,
		deviceTypeInfoList
	} from '@/api/lssue.js'
	export default {
		data() {
			return {
				reason: '1、明确操作人、监护人,严格执行操作监护制度。',
				show: false,
				type: 0,
				completeShow: false,
				list: [],
				operationId: '',
				form: {
					category: 0,
					name: '',
					measure: '',
					sort: '',
					ifPhotograph: 0,
					annexUrl: '',
					shopList: [{
						value: ''
					}]
				},
				listProcess: [],
				name: '',
				oldList: [],
				id: '',
				generateShow: false,
				treeData: [],
				generateForm: {
					name: '',
					deviceTypeId: '',
					label: ''
				},
				show: false
			};
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			// this.type = option.type || 0
			this.init()
			this.info(option.id)
			this.getinit()
		},
		methods: {
			// 上移当前索引
			moveUp(idx) {
				console.log(idx);
				this.swapItems(idx, idx - 1)
			},
			// 下移当前索引
			moveDown(idx) {
				console.log(idx);
				this.swapItems(idx, idx + 1)
			},
			// 交换数组元素位置
			swapItems(index1, index2) {
				if (index1 >= 0 && index1 < this.listProcess.length && index2 >= 0 && index2 < this.listProcess.length) {
					const temp = this.listProcess[index1];
					this.$set(this.listProcess, index1, this.listProcess[index2]);
					this.$set(this.listProcess, index2, temp);
				} else {
					console.error('索引超出数组范围');
				}
			},
			
			generateAdd() {
				if (this.listProcess.length <= 0) return uni.$u.toast('请先填写操作流程')
				const list = [...this.listProcess, ...this.oldList]
				const arr = list.map(v => v.sort - 0)
				console.log(arr, "arr");
				const ifCheck = this.checkDuplicates(arr)
				console.log(ifCheck, "ifCheck");
				this.listProcess.forEach(v => {
					if (v.category == 0) {
						v.content = '是,否'
						v.shopList = [{
								value: '是'
							},
							{
								value: '否'
							}
						]
					}
					if (v.category == 1) {
						const count = this.countParentheses(v.name)
						v.shopList = []
						v.content = Array.from({
							length: count
						}, (_, i) => i + 1).join(',');
						for (let i = 0; i < count; i++) {
							console.log(i, 'i')
							v.shopList.push({
								value: '1'
							})
						}
					}
					if (v.category == 2) {
						v.content = v.shopList.map(v => v.value).join(',')
					}
				})
				if (!this.isDataComplete()) {
					uni.$u.toast('存在未填写完整的项目')
					return
				}
				if (!ifCheck) {
					uni.$u.toast('当前排序值有重复');
					return;
				}
				this.generateForm = {
					name: '',
					deviceTypeId: '',
					label: ''
				}
				this.generateShow = true

			},
			processComit() {
				console.log(1111111);
				if (this.reason == '') return uni.$u.toast('请填写修改原因')
				if (this.listProcess.length <= 0) return uni.$u.toast('请填写操作流程')
				console.log(this.listProcess, "this.listProcess");
				const list = [...this.listProcess, ...this.oldList]
				console.log(list, "list");
				const arr = list.map(v => v.sort - 0)
				console.log(arr, "arrs");
				const ifCheck = this.checkDuplicates(arr)
				this.listProcess.forEach(v => {
					if (v.category == 0) {
						v.content = '是,否'
						v.shopList = [{
								value: '是'
							},
							{
								value: '否'
							}
						]
					}
					if (v.category == 1) {
						const count = this.countParentheses(v.name)
						v.shopList = []
						v.content = Array.from({
							length: count
						}, (_, i) => i + 1).join(',');
						for (let i = 0; i < count; i++) {
							console.log(i, 'i')
							v.shopList.push({
								value: '1'
							})
						}
					}
					if (v.category == 2) {
						v.content = v.shopList.map(v => v.value).join(',')
					}
				})
				if (!this.isDataComplete()) {
					uni.$u.toast('存在未填写完整的项目')
					return
				}
				// if (!ifCheck) {
				// 	uni.$u.toast('当前排序值有重复');
				// 	return;
				// }
				// if (this.findMax(this.oldList, this.listProcess)) {
				// 	uni.$u.toast('当前排序值不符合');
				// 	return;
				// }
				uni.showLoading({
					title: "加载中"
				})
				const length = this.oldList.length
				console.log(length,"length");
				this.listProcess.forEach((v,i)=>{
					v.sort = length + (i+1)
					console.log(v.sort,"sort");
				})
				console.log(this.listProcess, "打印提交数据");
				handoverUpdateApply({
					operateOrderId: this.id,
					afterJson: JSON.stringify(this.listProcess),
					reason: this.reason
				}).then(res => {
					console.log(res, "res");
					uni.hideLoading()
					uni.navigateBack({
						delta: 2
					});
				})
			},
			findMax(oldList, newList) {
				let list = oldList.map(v => v.sort - 0)
				let max = Math.max(...list);
				console.log(max);
				let types = 0
				newList.forEach(v => {
					if (max >= v.sort) {
						types++
					}
				})
				return types > 0 ? true : false
			},
			treeClick() {
				this.$refs.tree.itemclick(false, true)
			},
			treeComit(e) {
				console.log(e, 'e')
				this.generateForm.deviceTypeId = e[0].id
				this.generateForm.label = e[0].label
			},
			async getinit() {
				const res = await deviceTypeInfoList()
				console.log(res, "res");
				this.treeData = res.datas.map(ele => this.treeStructure1(ele));
			},
			treeStructure1(ele) {
				const haveChildren = Array.isArray(ele.nodes) && ele.nodes.length > 0;
				return {
					label: ele.text,
					id: ele.id,
					checked: false,
					children: haveChildren ? ele.nodes.map(i => this.treeStructure1(i)) : [],
				}
			},
			// 判断是否有重复的
			checkDuplicates(arr) {
				let set = new Set();
				for (let num of arr) {
					if (set.has(num)) {
						return false; // 数组中有重复的数字，返回false
					}
					set.add(num);
				}
				return true; // 数组中没有重复的数字，返回true
			},
			generateComit() {
				uni.showLoading({
					title: "加载中"
				})
				operationAdd({
					...this.generateForm,
					list: this.listProcess
				}).then(res => {
					uni.hideLoading()
					console.log(res, "res");
					this.init()
					this.generateShow = false
				})

			},
			isDataComplete(data) {
				for (let item of this.listProcess) {
					if (item.name == ''  || item.shopList.some(shop => shop.value == '')) {
						return false; // 如果有任何一个属性没有值，则返回 false
					}
				}
				return true; // 所有属性都有值，返回 true
			},
			async info(id) {
				const res = await getInfo({
					id,
				})
				this.oldList = res.datas.listProcess.filter(v => v.state == 1)
				this.oldList.forEach(v => {
					v.shopList = v.content.split(',').map(vi => {
						return {
							value: vi
						}
					})
				})
				const arr = res.datas.listProcess.filter(v => v.state == 0)
				console.log(arr, this.oldList, 'res')
				this.datas = res.datas
				arr.forEach(v => {
					v.shopList = v.content.split(',').map(vi => {
						return {
							value: vi
						}
					})
				})
				this.listProcess = [...arr]
			},
			add() {
				this.listProcess.push({
					category: 0,
					name: '',
					measure: '',
					sort: '',
					ifPhotograph: 0,
					annexUrl: '',
					shopList: [{
						value: ''
					}]
				})
			},
			dele(idx) {
				uni.showModal({
					title: '提示',
					content: "是否删除当前数据？",
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							this.listProcess.splice(idx, 1)
						}
					},

				})
			},
			comit(type) {
				if (type) {
					this.operationId = '';
				} else {
					if (this.operationId == '') {
						uni.$u.toast('请先选择模板');
						return;
					}
					const selectedTemplate = this.list.find(v => v.id == this.operationId);
					if (selectedTemplate) {
						selectedTemplate.list.forEach(v => {
							v.shopList = v.content.split(',').map(v => {
								return {
									value: v
								}
							})
						})
						console.log(selectedTemplate, "selectedTemplate");
						this.listProcess = [...selectedTemplate.list];
						this.name = selectedTemplate.name
					}
				}
				this.show = false;
			},
			showAdd(i) {
				this.listProcess[i].shopList.push({
					value: ''
				})
				this.$forceUpdate()
				console.log(this.listProcess[i]);
				console.log(this.listProcess, "111");
			},
			showDel(i, idx) {
				this.listProcess[i].shopList.splice(idx, 1)
				this.$forceUpdate()
			},
			async init() {
				const res = await operationList({
					PAGE_NO: 1,
					PAGE_SIZE: 10000
				})
				this.list = res.rows
				console.log(res, "res");
			},
			countParentheses(str) {
				const regex = /\(\)/g;
				const matches = str.match(regex)
				console.log(matches, 'matches')
				return matches ? matches.length : 0
			},
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
		padding-bottom: 140rpx;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding-bottom: 150rpx;
	}

	.item {
		height: 80rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding: 0 31rpx;
		background-color: #FFF;

		&_left {
			width: 215rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_lefts {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_left::before {
			content: '*';
			color: #FF0000;
		}

		&_right {
			flex: 1;
		}

		&_fu {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_upload {
			width: 307rpx;
			height: 98rpx;
			background: #267DFF;
			text-align: center;
			line-height: 98rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
		}

		&_yuan {
			width: 31rpx;
			height: 31rpx;
			border: 2rpx solid #E6E6E6;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		&_img {
			width: 31rpx;
			height: 31rpx;
			margin-right: 10rpx;
		}

	}

	.box {
		margin-top: 10rpx;
		background-color: #FFF;
		position: relative;
	}

	/deep/.placeholderClass {
		font-weight: 400;
		font-size: 26rpx;
		color: #CCCCCC;
	}

	/deep/.uni-textarea-textarea {
		font-size: 16px;
	}

	/deep/.placeholderClass1 {
		font-size: 26rpx;
		color: #CCCCCC;
	}

	.btn {
		width: 685rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		color: #FFF;
		background-color: #267DFF;

		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: #FFFFFF;
		font-style: normal;
		border-radius: 12rpx;
	}

	.bottom {
		padding-bottom: 20rpx;
		background-color: #FFF;
		padding-top: 10rpx;
		position: fixed;
		bottom: 0;
		width: 100%;

		view {
			width: 100%;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			font-weight: 500;
			font-size: 33rpx;
		}

		&_right {
			background-color: #267DFF;
			color: #FFF;
			font-weight: 500;
			font-size: 33rpx;
		}

	}

	.block {
		width: 634rpx;

		&_title {
			padding-top: 67rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
		}

		&_herder {
			width: 543rpx;
			height: 105rpx;
			background: #FFFFFF;
			margin: 0 auto;
			margin-top: 28rpx;
			padding: 0 0 19rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			&_left {
				font-weight: 400;
				font-size: 29rpx;
				color: #666666;
				font-style: normal;
			}

			&_right {
				width: 139rpx;
				height: 58rpx;
				background: #267DFF;
				border-radius: 13rpx;
				text-align: center;

				font-weight: 400;
				font-size: 29rpx;
				color: #FFFFFF;
				line-height: 58rpx;
			}
		}

		&_btn {
			margin-top: 26rpx;
			border-top: 1rpx solid #E0E0E0;
			height: 88rpx;

			&_left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
				text-align: center;
				border-right: 1rpx solid #e0e0e0;
				flex: 1;
				height: 85rpx;
				line-height: 85rpx;

			}

			&_right {
				flex: 1;
				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #3388FF;
			}
		}
	}

	.template {
		width: 543rpx;
		background: #F5F5F5;
		border-radius: 22rpx;
		margin: 0 auto;
		margin-top: 18rpx;
		max-height: 300rpx;
		overflow-y: scroll;

		&_herder {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #999999;
			padding-top: 29rpx;
			padding-left: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E6E6E6;
		}

		&_herder:last-child {
			border-bottom: none;
		}

		&_left {
			width: 150rpx;
		}

		&_right {
			flex: 1;
			text-align: center;
		}

		&_yuan {
			width: 31rpx;
			height: 31rpx;
			border: 2rpx solid #E6E6E6;
			border-radius: 50%;
		}

		&_img {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.blocks {
		width: 600rpx;
		// padding: 0 42rpx;

		&_herder {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			padding-top: 51rpx;
			margin-bottom: 20rpx;
		}

		&_btn {
			border-top: 1rpx solid #E6E6E6;
			height: 88rpx;

			&_left {
				flex: 1;
				text-align: center;
				line-height: 88rpx;
				border-right: 1rpx solid #E0E0E0;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				flex: 1;
				text-align: center;
				line-height: 88rpx;


				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #3388FF;
			}
		}


	}

	.renmideTiao {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 29rpx;
		color: #999999;
		margin: 0 auto;
		line-height: 41rpx;
		margin-bottom: 40rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.inputs {}

	.inputs input:last-of-type {
		border-radius: 50rpx !important;
		border-bottom: none !important;
	}

	.blockGener {
		width: 700rpx;
		// height: 600rpx;

		&_title {
			font-size: 36rpx;
			padding-top: 30rpx;
			text-align: center;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		&_item {
			padding: 20rpx 40rpx;
			margin-top: 10rpx;

			&_left {
				width: 210rpx;
			}

			&_right {
				border: 1rpx solid #CCCCCC;
				flex: 1;
				border-radius: 8rpx;
			}
		}
	}

	.txt::before {
		content: '*';
		color: #FF0000;
	}

	.eidt {
		width: 100%;
	}
	
	/deep/.uni-textarea-textarea {
		font-size: 32rpx;
	}
	
	// /deep/.u-icon {
	// 	position: absolute;
	// 	right: 10rpx;
	// 	top: 30rpx;
	// }
	/deep/.uicon-trash{
		font-size: 32rpx !important;
	}
	/deep/.u-textarea__field{
		height: auto  !important;
		min-height: 220rpx !important;
	}
	/deep/.uni-input-input{
	font-size: 24rpx;
	}
</style>